<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Clue</title>
    </head>
<body>
	<form action="Finish" id="finish">  
		<table> 
			<tr> 
				<td width="45%"> 
					<table id="rooms">
						<tr> 
							<td>
								<img src="images/kitchen.png" name="KITCHEN"  width="140px" height="140px" id="6" class="image-selector"/>
							</td>
							<td>
								<img src="images/corridor2.jpg" name="corridor" width="140px" height="140px" id="7" class="image-selector"/>
							</td>
							<td> 
								<img src="images/ballroom.png" name="BALLROOM" width="140px" height="140px"  id="8" class="image-selector"/>
							</td>
							<td>
								<img src="images/corridor2.jpg" name="corridor" width="140px" height="140px" id="9" class="image-selector"/>
							</td>
							<td>
								<img src="images/conservatory.png" name="CONSERVATORY" width="140px" height="140px" id="10" class="image-selector"/>
							</td>
						</tr>
						<tr>
							<td>
								<img src="images/corridor2.jpg" name="corridor" width="140px" height="140px" id="5" class="image-selector"/>
							</td>
							<td colspan="3" rowspan="3" valign="middle" align="center">
								<table id="actionPanel">
									<tr>
										<td colspan="3">
											<div id="infoMessage">
											
											</div>
										</td>
									</tr> 
									<tr>
										<td> 
											<table> 
												<tr>
													<td colspan="3">
														<label> accuse: </label>
														<input type="radio" value="accuse" name="actionGroup">
														<label> assume: </label>
														<input type="radio" value="assume" name="actionGroup">
													</td>
												</tr>	
												<tr>
													<td>
														<select id="weaponGuess">
															<option value="CANDLESTICK">Candlestick</option>
															<option value="LEAD_PIPE">Lead Pipe</option>
															<option value="ROPE">Rope</option>
															<option value="DAGGER">Dagger</option>
															<option value="REVOLVER">Revolver</option>
															<option value="WRENCH">Wrench</option>
														</select>
													</td>
													<td>
														<select id="charGuess">
															<option value="MISS_SCARLETT">Miss Scarlett</option>
															<option value="COLONEL_MUSTARD">Colonel Mustard</option>
															<option value="MRS_WHITE">Mrs White</option>
															<option value="REVEREND_GREEN">Reverend Green</option>
															<option value="MRS_PEACOCK">Mrs Peacock</option>
															<option value="PROFFESOR_PLUM">Proffesor Plum</option>
														</select>
													</td>
													<td>
														<select id="roomGuess">
															<option value="KITCHEN">Kitchen</option>
															<option value="BALLROOM">Ballroom</option>
															<option value="CONSERVATORY">Conservatory</option>
															<option value="BILLIARD_ROOM">Billiard Room</option>
															<option value="LIBRARY">Library</option>
															<option value="STUDY">Study</option>
															<option value="HALL">Hall</option>
															<option value="LOUNGE">Lounge</option>
															<option value="DINING_ROOM">Dining Room</option>
														</select>
													</td>
												</tr>
												<tr>
													<td align="center" colspan="3">
														<input type="button" value="Execute" id="execute"/>
														<input type="button" value="Roll Dice" id="rollDice">
														<input type="button" value="Retire" id="retire">
													</td>
												</tr>	 
											</table>
										</td>
									</tr>
									<tr>
										<td>
											<img src="images/d1.gif" id="dice">
										</td>
									</tr>
									<tr>
										<td>
											<input type="button" value="End Turn" id="endTurn">
										</td>
									</tr>
								</table>
							</td>
							<td>
								<img src="images/corridor2.jpg" name="corridor" width="140px" height="140px" id="11" class="image-selector"/>
							</td>
						</tr>
						<tr>
							<td>
								<img src="images/dining_room.png" name="DINING_ROOM" width="140px" height="140px" id="4" class="image-selector"/>
							</td>
							<td>
								<img src="images/billiard Room.png" name="BILLIARD_ROOM" width="140px" height="140px" id="12" class="image-selector"/>
							</td>
						</tr>
						<tr>
							<td> 
								<img src="images/corridor2.jpg" name="corridor" width="140px" height="140px" id="3" class="image-selector"/>
							</td>
							<td>
								<img src="images/library.png" width="140px" name="LIBRARY" height="140px" id="13" class="image-selector"/>
							</td>
						</tr>
						<tr>
							<td>
								<div class="fancybox" id="asd"></div>
								<img src="images/lounge.png" width="140px" name="LOUNGE" height="140px" id="2" class="image-selector"/>
							</td>
							<td>
								<img src="images/corridor2.jpg" name="corridor" width="140px" height="140px" id="1" class="image-selector"/>
							</td>
							<td>
								<img src="images/hall.png" width="140px" name="HALL" height="140px" id="0" class="image-selector"/> 	
							</td>
							<td>
								<img src="images/corridor2.jpg" name="corridor" width="140px" height="140px" id="15" class="image-selector"/>
							</td>
							<td>
								<img src="images/study.png" width="140px" name="STUDY" height="140px" id="14" class="image-selector"/>
							</td>
						</tr> 
					</table> 
				</td>  
				<td valign="top" width="40%"> 
					<table class="full" id="infoTable"> 
						<tr>    
							<td colspan="3">
								<table id="playerPanel" class="full">
									<tr>
										<td colspan="3" align="center" id="playerName" height="40px" width=50%>
										</td>
									</tr>   
									<tr>
										<td width="100%">
											<table class="full"> 
												<tr>
													<td width="5%"/>
													<td align="left" valign="top">
														<label>Weapon Cards:</label>
														<div id="weaponsCards">
														</div>
													</td>
													<td align="left" valign="top">
														<label>Room Cards:</label>
														<div id="roomsCards">
														</div>
													</td> 
													<td align="left" valign="top">
														<label>Characters Cards:</label>
														<div id="charactersCards">
														</div>
													</td>
												</tr>
											</table>
											<table>
												<tr>
													<td>
														<ul id="weaponSectionEnv">
														</ul>
													</td> 
													<td>
														<ul id="charSectionEnv">
														</ul>
													</td>
													<td>
														<ul id="roomSectionEnv">
														</ul>
													</td>
												</tr>
											</table>
										</td>
									</tr>
								</table>
							</td>
						</tr>
						<tr>	 
							<td align="center" width="100%" colspan="3">
								<div id="infoMsg"> 
									Hover on a room to view its content
								</div>
							</td>
						</tr>
						<tr>	 
							<td id="roomName" align="center"  width="100%" colspan="3">
							</td>
						</tr>
						<tr id="roomContent">
						</tr>
						<tr id="contradictCards"> 
			
						</tr>
					</table>
				</td>
				<td valign="top" width="15%"> 
					<table>
						<tr>
							<td>
								<table class="playersList">
									<tr> 
										<td>
											Players list:
										</td>
									</tr> 
									<tr>    
										<td align="center" id="playersList">
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			
		</table>
		<script type="text/javascript">
											    $(document).ready(function() {
											    	loadGame();
											    });
											</script>	
	</form>
</body>
</html>